import { Layout, Menu, Breadcrumb, Card, Row, Col, List, Avatar, Space, Table, Input, Tag, Timeline } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
import styles from './index.less';
import logo from '../../assets/logo.svg';
import { Link, connect } from 'umi';
import UploadUtil from '../UploadUtil'
import HeaderPage from './header'
import CatePage from './catelist'
import nopic from '../../assets/nopic.png'

const { Header, Content, Footer } = Layout;
const IconText = ({ icon, text }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);
class ViewPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            pageSize: 10,
            pageIndex: 1,
            dataSource: [],
            recSource: [],
            totalCount: 0,
            keywords: ''
        }
    }
    componentDidMount() {
        this.fetchArticle();
        this.fetchRec();
    }
    fetchArticle = (cid) => {
        var categoryId = cid ? cid : 0;
        this.setState({ loading: true });
        const { pageIndex, pageSize, keywords } = this.state;
        this.props.dispatch({
            type: "Article/getListsAsync",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, categoryId, keywords },
        }).then(() => {
            var resp = this.props.Article.response;
            if (resp) {
                var dataSource = resp.result.items;
                //dataSource = dataSource.filter(o=>o.isRec==false);
                this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
            }
        });
    }
    fetchRec = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: "Article/getListsAsync",
            payload: { SkipCount: 0, MaxResultCount: 5, isRec: true },
        }).then(() => {
            var resp = this.props.Article.response;
            if (resp) {
                var dataSource = resp.result.items;
                this.setState({ recSource: dataSource });
            }
        });
    }
    handlerSearch = (value) => {
        var that = this;
        console.log(value)
        this.setState({ keywords: value }, function () { that.fetchArticle(); });
    }
    render() {
        const { pageIndex, pageSize, dataSource, totalCount, recSource } = this.state;
        return (
            <Layout className="layout">
                <HeaderPage SelectedKeys="1" />
                <Content style={{ padding: '0 50px', marginTop: 64 }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item><Link to="/web">Home</Link></Breadcrumb.Item>
                    </Breadcrumb>
                    <Row gutter={[16, 16]}>
                        <Col span={4}><Card><CatePage getData={(cid) => this.fetchArticle(cid)} /></Card></Col>
                        <Col span={14}>
                            <Card>
                                <List
                                    itemLayout="vertical"
                                    loading={this.state.loading}
                                    size="large"
                                    pagination={{
                                        onChange: page => {
                                            console.log(page);
                                            this.setState({ pageIndex: page }, function () {
                                                this.fetchArticle();
                                            });
                                        },
                                        pageSize: pageSize,
                                        total: totalCount,
                                    }}
                                    dataSource={dataSource}
                                    footer={
                                        <div> 共 <b>{totalCount}</b> 条数据 </div>
                                    }
                                    renderItem={item => (
                                        <List.Item
                                            key={item.title}
                                            actions={[
                                                <IconText icon={StarOutlined} text={item.starCount} key="list-vertical-star-o" />,
                                                <IconText icon={LikeOutlined} text={item.hits} key="list-vertical-like-o" />,
                                                <IconText icon={MessageOutlined} text={item.commentCount} key="list-vertical-message" />,
                                            ]}
                                            extra={
                                                item.imageUrl ?
                                                    <img
                                                        height={120}
                                                        alt="logo"
                                                        src={UploadUtil.imgServ + item.imageUrl}
                                                    /> : false
                                            }
                                        >
                                            <List.Item.Meta
                                                avatar={item.userAvater ? <Avatar src={UploadUtil.imgServ + item.userAvater} /> : false}
                                                title={<><Link to={"/web/detail?id=" + item.id}>{item.title}</Link> <Tag color="blue">{item.categoryName}</Tag></>}
                                                description={item.subTitle}
                                            />
                                            {item.summary}
                                        </List.Item>
                                    )}
                                />
                            </Card></Col>
                        <Col span={6}>
                            <Card>
                                <Input.Search
                                    placeholder="给一点建议，我会给你一片天空"
                                    onSearch={value => this.handlerSearch(value)}
                                    enterButton />
                            </Card>
                            <Card>
                                <List
                                    itemLayout="vertical"
                                    dataSource={recSource}
                                    renderItem={item => (
                                        <List.Item key={item.id}>
                                            <Card
                                                bordered={false}
                                                style={{ width: 320 }}
                                                cover={item.imageUrl ? <img src={UploadUtil.imgServ + item.imageUrl} /> : false}>
                                                <Card.Meta title={<Link to={"/web/detail?id=" + item.id} title={item.title}>{item.title}</Link>} description={item.summary} />
                                            </Card>
                                        </List.Item>
                                    )}>
                                </List>

                            </Card>

                        </Col>
                    </Row>

                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        )
    }
}

export default connect(({ user, CrudModel, Category, Article }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    Category,
    Article,
}))(ViewPage);